<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Canvas</title>
	<link rel="stylesheet" href="/farbtastic/farbtastic.css"/>
	<link rel="stylesheet" href="/jquery-ui-1.8.21.custom.css"/>
	<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script src="/jquery-ui-1.8.21.custom.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script src="/farbtastic/farbtastic.js"></script>
	<script>
		function Point(event, target) {
			this.x = event.pageX - $(target).position().left;
			this.y = event.pageY - $(target).position().top;
		};
	</script>
	<script>
		$(document).ready(function() {
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			
			var width = 5;
			var color = '#000000';
			var isDown = false;
			var newPoint, oldPoint;
			
			// canvas events
			$('#canvas').mousedown(function(event) {
				isDown = true;
				oldPoint = new Point(event, this);
			}).mouseup(function() {
				isDown = false;
			}).mousemove(function(event) {
				if (isDown) {
					newPoint = new Point(event, this);
					
					socket.emit('draw', {
						width: width,
						color: color,
						x1: oldPoint.x,
						y1: oldPoint.y,
						x2: newPoint.x,
						y2: newPoint.y
					});
					
					oldPoint = newPoint;
				}
			});
			
			// socket events
			var socket = io.connect();
			socket.emit('join', '<%=room %>');
			socket.on('line', function(data) {
				context.lineWidth = data.width;
				context.strokeStyle = data.color;
				context.beginPath();
				context.moveTo(data.x1, data.y1);
				context.lineTo(data.x2, data.y2);
				context.stroke();
			});
			
			// construct UI
			$('#colorpicker').farbtastic(function(data) {
				color = data;
			});
			
			$('#slider').slider({
				max: 20, min: 1,
				value: 5,
				change: function(event, ui) {
					width = ui.value;
				}
			});
		});
	</script>
</head>
<body>
	<table border="10">
		<tr>
			<td rowspan="3">
				<canvas id="canvas" width="600" height="400"></canvas>
			</td>
			<td height="200">
				<div id="colorpicker"></div>
			</td>
		</tr>
		<tr>
			<td height="25">
				<div id="slider"></div>
			</td>
		</tr>
		<tr>
			<td height="170" style="background:Orange;"></td>
		</tr>
	</table>
</body>
</html>